<template>
  <view class="common-card">
    <view class="f_row_center" style="font-size: 30rpx;">
      <image src="/static/house_02.png" style="height: 36rpx;width: 36rpx;margin-right: 10rpx"/>
      {{ item.buildingname }}
      <span
          style="color: #4575F2;font-size: 24rpx;margin-left: 10rpx"> {{ item.layername + '-' + item.roomname }}</span>
    </view>
    <view class="h_line" style="margin: 10rpx 0"></view>
    <view class="f_row_center" style="font-size: 24rpx;color: #666666;margin-bottom: 10rpx">
      <image src="/static/sy_mj.png" style="height: 30rpx;width: 30rpx"/>
      房间面积：{{ item.area }}㎡
    </view>
    <uni-table class="room-table" style="font-size: 20rpx" ref="table" border stripe emptyText="暂无更多数据">
      <uni-tr>
        <uni-th align="center">序号</uni-th>
        <uni-th align="center">姓名
        </uni-th>
        <uni-th align="center">职称
        </uni-th>
        <uni-th align="center">职务
        </uni-th>
        <uni-th align="center">核定面积</uni-th>
      </uni-tr>
      <uni-tr v-for="(vItem, index) in item.personlist" :key="index">
        <uni-td align="center">{{ index + 1 }}</uni-td>
        <uni-td align="center">{{ vItem.username }}</uni-td>
        <uni-td align="center">{{ vItem.userpro }}</uni-td>
        <uni-td align="center">{{ vItem.leaderpost }}</uni-td>
        <uni-td align="center">{{ vItem.standsque }}</uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script lang="ts">
import {Vue, Component, Prop} from "vue-property-decorator";

@Component({
  components: {}
})
export default class ItemDataRoomView extends Vue {
  @Prop() item?: any;

}
</script>

<style scoped>
.room-table >>> .uni-table-td {
  padding: 10rpx;
  font-size: 20rpx;
}

.room-table >>> .uni-table-th {
  padding: 10rpx;
  font-size: 20rpx;
  color: #5986EC;
  background: #EFF2FA;
}

</style>